/* eslint-disable no-useless-escape */
class CreateDom {
  // 获取根卡片  模型组名
  static getModelRootDom(modelInfo) {
    return `
        <div class="model-edit-card" style="background-color: ${modelInfo.bgc}" >
            <div class="model-info">
                <p class="model-title-p">模型组名</p>
                <div class="model-name-info">
                    <p><span>${modelInfo.modelName}</span></p>
                </div>
            </div>
        </div>
        `
  }

  // 获取子级卡片  模型名/标签
  static getModelCardDom(modelInfo) {
    let selectList = ``
    for (let i = 0; i < modelInfo.modelSelectList.length; i++) {
      selectList += `<option value="${modelInfo.modelSelectList[i].value}">${modelInfo.modelSelectList[i].label}</option>`
    }

    return `
        <div class="model-edit-card" style="background-color: ${modelInfo.bgc}" >
            <div class="model-info">
                <p class="model-title-p">${modelInfo.modelTitle}</p>
                <div class="model-name-info">
                    <select class="select-model-list" data-type='${modelInfo.modelType}' data-title='${modelInfo.modelTitle}' >
                        ${selectList}
                    </select>
                </div>
            </div>
            <div class="model-weight" >
                <p>权重</p>
                <input
                    type='text'
                    data-label='${modelInfo.selectOption}'
                    data-model='${modelInfo.selectModelId}'
                    data-level='${modelInfo.level}'
                    data-type='${modelInfo.modelType}'
                    class="model-weight-input"
                    placeholder=""
                    onkeyup="!/^(\d+\.?)?\d{0,1}$/.test(this.value)?(this.value=this.value.substring(0, this.value.length-1)): ''"
                    value=${modelInfo.modelWeight}>
                </input>
            </div>
        </div>
        `
  }

  // 生成自定义右键菜单
  static getContextMenu() {
    return `
            <el-menu
                class="context-menu"
                v-show="showMenu"
                :style="{
                left: menuStyle.left,
                top: menuStyle.top,
                bottom: menuStyle.bottom,
                right: menuStyle.right
                }"
                ref="context">
                <slot>
                    <el-menu-item @click="addBrother">插入平级</el-menu-item>
                    <el-menu-item @click="addChild">插入子级</el-menu-item>
                    <el-menu-item @click="delCard">删除卡片</el-menu-item>
                </slot>
            </el-menu>
        `
  }

  // 获取固定的初始化数据
  static getInitData(params) {
    return [
      {
        id: 'point', // 必选  ID， 所有节点的 id 不应该重复，否则 重复id的结节将被忽略
        topic: CreateDom.getModelCardDom({ bgc: '#0FA984', modelTitle: '模型名', modelSelectList: params.personList, modelType: 'point', selectOption: params.personList[0].label, selectModelId: params.personList[0].value, level: 1, modelWeight: 1 }), // 必填  节点上显示的内容
        direction: 'right', // 可选  节点的方向  此数据仅在第一层节点上有效，目前仅支持 left 和 right 两种，默认为 right
        expanded: true, //  [可选] 该节点是否是展开状态，默认为 true
        level: 1,
        type: 'point',
        title: '模型名',
        children: []
      },
      {
        id: 'relation', // 必选  ID， 所有节点的 id 不应该重复，否则 重复id的结节将被忽略
        topic: CreateDom.getModelCardDom({ bgc: '#0FA984', modelTitle: '模型名', modelSelectList: params.relationList, modelType: 'relation', selectOption: params.relationList[0].label, selectModelId: params.relationList[0].value, level: 1, modelWeight: 1 }), // 必填  节点上显示的内容
        direction: 'right', // 可选  节点的方向  此数据仅在第一层节点上有效，目前仅支持 left 和 right 两种，默认为 right
        expanded: true, //  [可选] 该节点是否是展开状态，默认为 true
        level: 1,
        type: 'relation',
        title: '模型名',
        children: []
      }
    ]
  }
}

export default CreateDom
